<script  setup>
import Card from "../../help/Card.vue"
import {ref,nextTick} from "vue"
import {EchartsOptions} from "../../help/index.js"

const id1 = ref(Math.random().toString(36).substring(2, 9))
const id2 = ref(Math.random().toString(36).substring(2, 9))
const id3 = ref(Math.random().toString(36).substring(2, 9))


const option1 = {
  color: ['#CCCCFF','#99CCFF','#6699CC'],
  legend: {
    show: false
  },
  tooltip: {

  },
  grid: {
    left: '5%',
    top: '0%',
    right: '5%',
    bottom: '1%',
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '环境传感器原理', max: 100 },
      { name: 'MQTT', max: 100 },
      { name: 'Python', max: 100 },
      { name: 'Node-read', max: 100 },
    ],
    name: {
      textStyle: {
        color: '#000',
        padding: [-10, -12]  // 控制文字padding
      }
    }
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [20, 40, 30],
          name: '一组'
        },
        {
          value: [50, 60, 70],
          name: '二组'
        },
        {
          value: [30, 40, 50],
          name: '三组'
        },
        {
          value: [30, 40, 50],
          name: '四组'
        },
        {
          value: [30, 40, 50],
          name: '五组'
        },
        {
          value: [30, 40, 50],
          name: '六组'
        },
      ]
    }
  ]
}

const option2= {
  color: ['#CCFFCC','#66CCCC','#99CCCC'],

  legend: {
    show: false
  },
  tooltip: {

  },
  grid: {
    left: '5%',
    top: '0%',
    right: '5%',
    bottom: '1%',
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '调试传感器', max: 100 },
      { name: '调试阿里云IOT', max: 100 },
      { name: '程序实现系统功能', max: 100 },
      { name: '调试Node-red', max: 100 },
    ],
    name: {
      textStyle: {
        color: '#000',
        padding: [-10, -12]  // 控制文字padding
      }
    }
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [20, 40, 30],
          name: '一组'
        },
        {
          value: [50, 60, 70],
          name: '二组'
        },
        {
          value: [30, 40, 50],
          name: '三组'
        },
        {
          value: [30, 40, 50],
          name: '四组'
        },
        {
          value: [30, 40, 50],
          name: '五组'
        },
        {
          value: [30, 40, 50],
          name: '六组'
        },
      ]
    }
  ]
}

const option3 = {
  legend: {
    show: false
  },
  tooltip: {

  },
  grid: {
    left: '5%',
    top: '0%',
    right: '5%',
    bottom: '1%',
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '领悟吃苦耐劳', max: 100 },
      { name: '领悟精益求精', max: 100 },
      { name: '理悟技能报国', max: 100 },
      { name: '理悟生态文明', max: 100 },
    ],
    name: {
      textStyle: {
        color: '#000',
        padding: [-10, -12]  // 控制文字padding
      }
    }
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [20, 40, 30],
          name: '一组'
        },
        {
          value: [50, 60, 70],
          name: '二组'
        },
        {
          value: [30, 40, 50],
          name: '三组'
        },
        {
          value: [30, 40, 50],
          name: '四组'
        },
        {
          value: [30, 40, 50],
          name: '五组'
        },
        {
          value: [30, 40, 50],
          name: '六组'
        },
      ]
    }
  ]
}

nextTick(() =>{
  EchartsOptions(option1, id1.value)
  EchartsOptions(option2, id2.value)
  EchartsOptions(option3, id3.value)
})

</script>

<template>
    <Card title="教学目标达成度" class="flex basis-2/3 w-full h-full animate__animated animate__fadeInTopLeft overflow-auto" >
      <div class="flex w-full h-full gap-x-1 items-center">
        <div class="h-[90%] w-[90%]" :id="id1"/>
        <div class="h-[90%] w-[90%]" :id="id2"/>
        <div class="h-[90%] w-[90%]" :id="id3"/>
      </div>
    </Card>
</template>
